<template>
  <div class="dashboard-container">
    <div class="app-container">
<!--      头部区域引用全局组件-->
<page-tools :show-before="true">
  <template slot="before">
    <span>用户总数:{{total}}</span>
  </template>

  <template slot="after">
<!--    <el-button size="small" type="warning">导入</el-button>-->
<!--    <el-button size="small" type="danger">导出</el-button>-->
    <el-button size="small" type="primary" @click="showDialog=true" :disabled="!checkPermission('users_add')">新增会员</el-button>
  </template>

</page-tools>
<!--表格区域-->
<el-card>
  <el-table  v-loading="loading" border :data="list" stripe >
    <el-table-column label="序号" sortable  type="index" />
    <el-table-column label="姓名" sortable prop="username"/>
    <el-table-column label="学号" sortable prop="studentId" />
    <el-table-column label="院系" sortable prop="depart"/>
    <el-table-column label="专业" sortable prop="specialty"/>
    <el-table-column label="手机号码" sortable prop="phonnnum"/>
    <el-table-column label="入会时间" sortable  prop="joinDate">
      <!-- 作用域插槽  row.timeOfEntry | formatDate-->
      <template slot-scope="data">{{ data.row.joinDate | formatDate }}</template>

    </el-table-column>
    <el-table-column label="账户状态" sortable prop="status" :formatter="format"/>
    <el-table-column label="操作" sortable fixed="right" width="280">
      <template slot-scope="data">
        <el-button type="text" size="small" @click="$router.push(`/users/detail/${data.row.userId}`)" :disabled="!checkPermission('users_check')">查看</el-button>
        <el-button type="text" size="small" @click="editRoles(data.row.userId)" :disabled="!checkPermission('users_ assign')">角色</el-button>
        <el-button type="text" size="small" @click="removeusers(data.row.userId)" :disabled="!checkPermission('users_remove')">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-row type="flex" justify="center" align="middle" style="height: 60px">
    <el-pagination  :current-page="page.page"
                    :page-size="page.pagesize"
                    :total="total"
                    @current-change="changePage"
                    layout="prev, pager, next" />
  </el-row>
</el-card>

    </div>

<!--    添加用户的弹窗-->
    <add-users :show-dialog.sync="showDialog" @addUsers="getusers"></add-users>

<!--    编辑用户角色弹窗-->
    <assign-role ref="editRoles" :show-role-dialog.sync="showRoleDialog" :user-id="userId"></assign-role>
  </div>
</template>

<script>


import  {getusers,removeusers} from '@/api/user'
import  stateNum from '@/api/constant/users'
import addUsers from './component/add_users'
import assignRole from './component/assign-role'
import AssignRole from "@/views/users/component/assign-role";


export default {
  name:'users',
  data(){
    return {
      list:[], //接收用户数组
      page:{
        page:1,
        pagesize:10,

      },
      total:0,
      showDialog:false, //控制弹窗
      showRoleDialog:false, //角色弹窗
      userId:null ,//给角色弹窗的用户id
      loading:false
    }
  },
  components:{
    AssignRole,
    addUsers
  },
  created() {
  this.getusers()
    },

  methods:{
//获取用户
   async getusers(){
     this.loading=true

    const result=await getusers(this.page)
      this.total=result.total
     this.list=result.row
    this.loading=false
   },
    //页面改变时
    changePage(newPage){

     /*
     * page:1
     * pagesize:10  表示从1开始选择十条数据
     * 当我们点击2页码时，我们就得从第10条数据开始，再选择十条
     * 后台的sql语句中使用limit查询，
     * 所以才有以下
     *(newPage-1)*this.page.pagesize
     * 要查询的页码-1 ，再乘以页长，页长是固定的10
     * 比如查询第二页，发给后台就是从10开始查10条数据，也就是查到第二十条数据
     * */
     this.page.page=(newPage-1)*this.page.pagesize //赋值最新的页码
      this.getusers()


    },

//格式化用户状态的数据
    format(row, column, cellValue, index){
    const obj=stateNum.state.find(item => item.id === cellValue)
    return obj ? obj.value :'未知'
   },
//删除用户
   async removeusers(userId){

      try {
        await this.$confirm('您确定删除该员工吗')
        await removeusers(userId)
        await this.getusers()
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }

    },
//编辑角色
    editRoles(userId){
     this.showRoleDialog=true
      this.userId=userId
      this.$refs.editRoles.getdetailRoles(userId)
    }


  }
}
</script>

<style scoped>

</style>
